<template>
  <div id="app">
      <header class="header_terr">
        <span><img src="../assets/img/my_left.png"></span>
        <span>我的</span>
        <span><img src="../assets/img/my_left.png"></span>
      </header>
        <!--  -->
        <div class="my_denglu">
            <div class="content">
                <div class="left">
                  <img src="../assets/img/my.png">
                </div>
                <div class="centent">
                  <div class="text">
                  <h3>立即登录</h3>
                  <p>登录后可享受更多特权</p>
                  </div>
                </div>
                <div class="right">></div>
            </div>
        </div>
        <!--  -->
        <div class="navbar">
          <figure>
            <img src="../assets/img/my_$.png">
            <p>钱包</p>
          </figure>

          <figure>
            <img src="../assets/img/my_hui.png">
            <p>优惠</p>
          </figure>

          <figure>
            <img src="../assets/img/my_￥.png">
            <p>金币</p>
          </figure>
        </div>
        <!--  -->
        <div class="list">
          <div class="content_list" v-for="(v,i) in list" :key="i">
            <img :src="v.img">
            <p><span>{{v.sp1}}</span><span>{{v.sp2}}</span></p>
          </div>
        </div>
        <!--  -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'app',
  data () {
      return {
        list:[
          {
             "img":"src/assets/img/list_1.png",
             "sp1":"收货地址",
             "sp2":">"
          },
          {
             "img":"src/assets/img/list_2.png",
             "sp1":"我的收藏",
             "sp2":">"
          },
          {
             "img":"src/assets/img/list_3.png",
             "sp1":"金币商城",
             "sp2":">"
          },
          {
             "img":"src/assets/img/list_4.png",
             "sp1":"我的客服",
             "sp2":">"
          },
          {
             "img":"src/assets/img/lits_5.png",
             "sp1":"欢迎评分",
             "sp2":">"
          },
          {
             "img":"src/assets/img/list_6.png",
             "sp1":"加盟合作",
             "sp2":">"
          }
        ]
      }
  }
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {@{name}: @px / 75 * 1rem;}
.header_terr{
  z-index: 99;
  width: 100%;
  .px2rem(height, 100);
  position: fixed;
  left: 0;
  top: 0;
  background: #03a5ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  .px2rem(font-size, 32);
  font-weight: 400;
  span:nth-child(1){
    width: 8%;
    img{
    .px2rem(width, 50);
    .px2rem(height, 50);
    margin: 0 10%;
    }
  }
  span:nth-child(3){
    width: 8%;
    img{
    .px2rem(width, 50);
    .px2rem(height, 50);
    margin: 0 10%;
    }
  }
}
 .my_denglu{
   .px2rem(margin-top, 100);
   width: 100%;
   .px2rem(height, 200);
   background: #03a5ff;
   display: flex;
   align-items: center;
   .content{
     width: 100%;
     height: 80%;
     display: flex;
     .left{
       width: 20%;
       height: 100%;
       display: flex;
       align-items: center;
       img{
         .px2rem(width, 120);
         .px2rem(height, 120);
          margin: 0 10%;
       }
     }
     .centent{
       display: flex;
       flex: 1;
       align-items: center;
       .text{
         width: 100%;
         height: 60%;
         h3{
           .px2rem(font-size, 36);
           display: flex;
           align-items: center;
           height: 50%;
           font-weight: 400;
           color: white;
         }
         p{
           .px2rem(font-size, 24);
           display: flex;
           align-items: center;
           height: 50%;
           color: white;
         }
       }
     }
     .right{
       width: 8%;
       height: 100%;
       .px2rem(font-size, 40);
       font-weight: bolder;
       display: flex;
       justify-content: center;
       align-items: center;
       color: white;
     }
   }
 } 
 #app{
   height: 90vh;
   background: #f5f5f5;
 }
 .navbar{
   width: 100%;
   .px2rem(height, 160);
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    .px2rem(margin-bottom,20);  
    figure{
      width: 100/3%;
      .px2rem(padding-top,30);
      img{
        .px2rem(height, 75);
        .px2rem(width,80);
        display: block;
        margin: 0 auto;
      }
      p{
        color: #666666;
        .px2rem(font-size, 24);
        text-align: center;
        .px2rem(line-height, 40);
      }
    }
    figure:nth-child(2){
      border-right:1px solid #eeeeee;
      border-left:1px solid #eeeeee;
      
    }
 }
 .list{
   width: 100%;
   height: 300px;
   .content_list{
     width: 100%;
     .px2rem(height, 88);
     background: #ffffff;
     display: flex;
     align-items: center;
     img{
       .px2rem(height, 50);
        .px2rem(width,50);
        margin: 0 3%;
     }
     p{
       flex: 1;
       height: 100%;
       display: flex;
       align-items: center;
       span:nth-child(1){
         flex: 1;
         .px2rem(font-size, 30);
         font-weight: bolder;
       }
       span:nth-child(2){
        width: 6%;
        .px2rem(font-size, 40);
         font-weight: bolder;
         color: #c7c7cc;
       }
     }
   }
   .content_list:nth-child(1){
     p{
       border-bottom: 1px solid #eeeeee;
     }
   }
   .content_list:nth-child(2){
       border-bottom: 1px solid #eeeeee;
   }
   .content_list:nth-child(3){
       .px2rem(margin-top, 20);
       .px2rem(margin-bottom, 20);
        border-bottom: 1px solid #eeeeee;
         border-top: 1px solid #eeeeee;
   }
   .content_list:nth-child(4){
       border-top: 1px solid #eeeeee;
       p{
       border-bottom: 1px solid #eeeeee;
     }
   }
   .content_list:nth-child(5){
       p{
       border-bottom: 1px solid #eeeeee;
     }
   }
   .content_list:nth-child(6){
       border-bottom: 1px solid #eeeeee;
   }
 }
</style>